// 知识解释智能体前端应用
class KnowledgeAgentApp {
    constructor() {
        this.currentUserId = '';
        this.sessionId = '';
        this.isLoading = false;
        this.init();
    }

    init() {
        this.bindEvents();
        this.loadUserSession();
        this.updateQuestionTypes();
        this.showWelcomeMessage();
        
        // 显示用户登录状态
        this.showUserStatus();
        
        // 加载多模态增强功能
        this.loadMultimodalEnhancements();
    }

    bindEvents() {
        // 用户ID输入
        const userIdInput = document.getElementById('userId');
        if (userIdInput) {
            userIdInput.addEventListener('change', (e) => {
                this.currentUserId = e.target.value;
                this.sessionId = `session_${this.currentUserId}_${Date.now()}`;
                this.saveUserSession();
            });
        }

        // 消息输入
        const messageInput = document.getElementById('messageInput');
        const sendBtn = document.getElementById('sendBtn');

        if (messageInput) {
            messageInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    this.sendMessage();
                }
            });

            // 自动调整高度
            messageInput.addEventListener('input', () => {
                this.adjustTextareaHeight(messageInput);
            });
        }

        if (sendBtn) {
            sendBtn.addEventListener('click', () => {
                this.sendMessage();
            });
        }

        // 清空聊天记录
        const clearBtn = document.getElementById('clearChat');
        if (clearBtn) {
            clearBtn.addEventListener('click', () => {
                this.clearChat();
            });
        }

        // 导出聊天记录
        const exportBtn = document.getElementById('exportChat');
        if (exportBtn) {
            exportBtn.addEventListener('click', () => {
                this.exportChat();
            });
        }
    }

    async sendMessage() {
        const messageInput = document.getElementById('messageInput');
        const message = messageInput.value.trim();

        if (!message) return;

        // 添加用户消息
        this.addMessage(message, 'user');
        messageInput.value = '';
        this.adjustTextareaHeight(messageInput);

        // 显示加载状态
        this.setLoading(true);

        try {
            // 调用后端API
            const response = await this.callBackendAPI(message);
            if (response.status === 'success') {
                // 使用多模态增强渲染
                let enhancedContent = await this.renderMultimodalContent(response.answer_markdown);
                // 自动提取代码练习和综合案例并存入localStorage（只提取题目和步骤）
                let code_practice = '';
                let comprehensive_case = '';
                // 提取代码练习两个题目
                const codePracticeMatch = response.answer_markdown.match(/(代码练习[\s\S]*?)(?=(#|##|###|\*\*|🏆|\u{1F3C6}|综合案例|$))/u);
                if (codePracticeMatch) {
                    // 匹配所有“练习1：...”和“练习2：...”
                    const exs = Array.from(codePracticeMatch[0].matchAll(/练习[12]：(.+?)(?=\n|$)/g));
                    code_practice = exs.map(e => e[0]).join('\n');
                }
                // 提取综合案例的案例要求和实现步骤
                const comprehensiveCaseMatch = response.answer_markdown.match(/(综合案例[\s\S]*)/u);
                if (comprehensiveCaseMatch) {
                    // 匹配“案例要求：...”和“实现步骤：...”
                    const req = comprehensiveCaseMatch[0].match(/案例要求：([\s\S]*?)(?=实现步骤|$)/);
                    const steps = comprehensiveCaseMatch[0].match(/实现步骤：([\s\S]*)/);
                    comprehensive_case = '';
                    if (req) comprehensive_case += '案例要求：' + req[1].trim() + '\n';
                    if (steps) comprehensive_case += '实现步骤：' + steps[1].trim();
                }
                // 调试：直接存储大模型原始内容，确保分析界面能读取
                // 去除“实践练习”部分（支持多种格式）
                let answerForAnalysis = response.answer_markdown
                    // Markdown标题格式（匹配### 实践练习等，兼容表情但不强制匹配）
                    .replace(/### ?[\s\S]*?(实践练习|调试练习|实践对比|开始实践)[\s\S]*?(?=\n###|\n##|\n#|$)/g, '')
                    // HTML格式（如fallback回答）
                    .replace(/<div class="system-section-title">.*?(实践练习|调试练习|实践对比|开始实践).*?<\/div>[\s\S]*?<\/p>/g, '');
                localStorage.setItem('rust_examples', JSON.stringify({ code_practice: answerForAnalysis, comprehensive_case: answerForAnalysis }));
                console.log('已存入rust_examples:', { code_practice: answerForAnalysis, comprehensive_case: answerForAnalysis });
                this.addMessage(enhancedContent, 'assistant', response.classification);
                this.updateQuestionTypeIndicator(response.classification.label);
                this.showStatus(`问题类型: ${response.classification.label} | 置信度: ${(response.classification.confidence * 100).toFixed(1)}%`, 'success');
            } else {
                this.addMessage(`抱歉，处理您的问题时出现错误：${response.message}`, 'assistant');
                this.showStatus('处理失败', 'error');
            }
        } catch (error) {
            console.error('API调用错误:', error);
            this.addMessage('抱歉，网络连接出现问题，请稍后重试。', 'assistant');
            this.showStatus('网络错误', 'error');
        } finally {
            this.setLoading(false);
        }
    }

    async callBackendAPI(message) {
        try {
            const response = await fetch('/api/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    user_id: this.currentUserId || 'anonymous',
                    message: message
                })
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            return data;
        } catch (error) {
            console.error('API调用错误:', error);
            // 如果API调用失败，回退到模拟响应
            return this.getMockResponse(message);
        }
    }

    getMockResponse(message) {
        return new Promise((resolve) => {
            setTimeout(() => {
                const mockResponse = {
                    status: 'success',
                    classification: {
                        label: this.detectQuestionType(message),
                        confidence: 0.85 + Math.random() * 0.15
                    },
                    answer_markdown: this.generateMockAnswer(message),
                    rendered_html: '<div>Mock HTML</div>',
                    context_length: Math.floor(Math.random() * 5) + 1
                };
                resolve(mockResponse);
            }, 1000);
        });
    }

    detectQuestionType(message) {
        const lowerMessage = message.toLowerCase();
        
        if (lowerMessage.includes('是什么') || lowerMessage.includes('定义') || lowerMessage.includes('概念')) {
            return 'definition';
        } else if (lowerMessage.includes('怎么') || lowerMessage.includes('如何') || lowerMessage.includes('使用')) {
            return 'usage';
        } else if (lowerMessage.includes('错误') || lowerMessage.includes('问题') || lowerMessage.includes('调试')) {
            return 'error_debug';
        } else if (lowerMessage.includes('区别') || lowerMessage.includes('不同') || lowerMessage.includes('比较')) {
            return 'comparison';
        } else {
            return 'faq';
        }
    }

    generateMockAnswer(question) {
        const answers = {
            definition: `## 概念定义
**${question.replace('是什么', '').replace('？', '')}**是Rust编程语言中的一个重要概念。

## 核心要点
- 这是Rust的核心特性之一
- 确保内存安全和线程安全
- 编译时检查，运行时零开销

## 示例代码
\`\`\`rust
// 示例代码
fn example() {
    println!("这是一个示例");
}
\`\`\`

## 相关概念
- 所有权系统
- 借用检查器
- 生命周期管理`,

            usage: `## 基本用法
以下是**${question.replace('怎么', '').replace('如何', '').replace('使用', '').replace('？', '')}**的基本用法：

## 代码示例
\`\`\`rust
fn main() {
    // 基本用法示例
    let result = example_function();
    println!("结果: {}", result);
}

fn example_function() -> i32 {
    42
}
\`\`\`

## 参数说明
- param1: 第一个参数的作用
- param2: 第二个参数的作用

## 最佳实践
1. 遵循Rust的命名约定
2. 使用适当的错误处理
3. 考虑性能影响`,

            error_debug: `## 错误分析
您遇到的**${question.replace('错误', '').replace('问题', '').replace('？', '')}**通常是由于以下原因：

## 常见原因
- 借用检查器规则违反
- 生命周期不匹配
- 类型不匹配

## 解决方案
\`\`\`rust
// 错误代码
let mut v = vec![1, 2, 3];
let first = &v[0];
v.push(4); // 编译错误

// 正确代码
let mut v = vec![1, 2, 3];
v.push(4);
let first = &v[0]; // 正确
\`\`\`

## 调试技巧
1. 仔细阅读编译器错误信息
2. 使用 cargo check 进行静态检查
3. 逐步简化代码定位问题`,

            comparison: `## 对比分析
**${question.replace('区别', '').replace('不同', '').replace('比较', '').replace('？', '')}**的主要差异：

## 核心差异
| 特性 | Rust | 其他语言 |
|------|------|----------|
| 内存管理 | 所有权系统 | 垃圾回收/手动管理 |
| 并发安全 | 编译时检查 | 运行时检查 |
| 性能 | 零开销抽象 | 可能有运行时开销 |

## 代码对比
\`\`\`rust
// Rust 示例
let s = String::from("hello");
// 所有权自动管理
\`\`\`

\`\`\`cpp
// C++ 示例
std::string s = "hello";
// 需要手动管理内存
\`\`\`

## 适用场景
- **Rust**: 系统编程、性能敏感应用
- **其他**: 快速原型、脚本编程`,

            faq: `## 问题解答
关于**${question.replace('？', '')}**的详细解答：

## 背景说明
这是一个常见的问题，涉及到Rust的学习路径和最佳实践。

## 实践建议
1. 从官方文档开始学习
2. 多做练习项目
3. 参与社区讨论

## 学习资源
- [Rust官方文档](https://doc.rust-lang.org/)
- [Rust Book](https://doc.rust-lang.org/book/)
- [Rust by Example](https://doc.rust-lang.org/rust-by-example/)

## 扩展阅读
- 所有权系统详解
- 生命周期管理
- 错误处理最佳实践`
        };

        const questionType = this.detectQuestionType(question);
        return answers[questionType] || answers.faq;
    }

    addMessage(content, sender, classification = null) {
        const messagesContainer = document.querySelector('.messages');
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${sender}`;

        const time = new Date().toLocaleTimeString();
        let messageContent = content;
        // 如果是助手消息，使用多模态渲染
        if (sender === 'assistant') {
            if (content.includes('<div class="code-block"') || content.includes('<div class="mermaid-container"')) {
                messageContent = content;
            } else {
                messageContent = this.renderEnhancedMarkdown(content);
            }
        }
        messageDiv.innerHTML = `
            <div class="message-content">
                ${messageContent}
                ${classification ? `<div class="message-meta">
                    <small>类型: ${classification.label} | 置信度: ${(classification.confidence * 100).toFixed(1)}%</small>
                </div>` : ''}
            </div>
            <div class="message-time">${time}</div>
        `;
        messagesContainer.appendChild(messageDiv);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
        if (sender === 'assistant') {
            this.processMessageContent(messageDiv);
        }
    }

    renderEnhancedMarkdown(markdown) {
        // 1. 用 marked 解析所有 Markdown
        let html = marked.parse(markdown);

        // 2. 处理 Mermaid 图表
        html = html.replace(/```mermaid\s*\n([\s\S]*?)\n```/g, (match, code) => {
            const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
            return `<div class="mermaid-container" id="${id}">
                <div class="mermaid-header">
                    <span class="diagram-type">流程图</span>
                </div>
                <div class="mermaid-content">
                    <div class="mermaid" data-mermaid="${encodeURIComponent(code)}">
                        ${code}
                    </div>
                </div>
            </div>`;
        });

        // 3. 处理 Rust 代码块
        html = html.replace(/<pre><code class="language-rust">([\s\S]*?)<\/code><\/pre>/g, (match, code) => {
            const id = `code-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
            return `<div class="code-block" data-language="rust" id="${id}">
                <div class="code-header">
                    <span class="language-tag">rust</span>
                    <button class="copy-btn" onclick="copyCode('${id}')">复制</button>
                </div>
                <pre><code class="language-rust">${this.escapeHtml(code)}</code></pre>
            </div>`;
        });

        // 4. 其他代码块
        html = html.replace(/<pre><code class="language-([\w-]+)">([\s\S]*?)<\/code><\/pre>/g, (match, lang, code) => {
            if (lang === 'rust') return match; // rust已处理
            const id = `code-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
            return `<div class="code-block" data-language="${lang}" id="${id}">
                <div class="code-header">
                    <span class="language-tag">${lang}</span>
                    <button class="copy-btn" onclick="copyCode('${id}')">复制</button>
                </div>
                <pre><code class="language-${lang}">${this.escapeHtml(code)}</code></pre>
            </div>`;
        });

        // 5. 包裹到主容器
        if (!html.includes('content-section')) {
            html = `<div class="content-section main-section">${html}</div>`;
        }
        html += '</div>';
        return html;
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    processMessageContent(messageDiv) {
        // 处理代码高亮
        const codeBlocks = messageDiv.querySelectorAll('pre code');
        codeBlocks.forEach(block => {
            if (window.hljs) {
                hljs.highlightElement(block);
            }
        });
        
        // 处理Mermaid图表
        const mermaidDivs = messageDiv.querySelectorAll('.mermaid');
        mermaidDivs.forEach(div => {
            if (window.mermaid) {
                mermaid.render(`mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, div.textContent)
                    .then(({ svg }) => {
                        div.innerHTML = svg;
                        // Mermaid渲染后，svg已插入，添加缩放拖拽
                        const svgElem = div.querySelector('svg');
                        if (svgElem && window.svgPanZoom) {
                            const panZoomInstance = svgPanZoom(svgElem, {
                                zoomEnabled: true,
                                controlIconsEnabled: true,
                                fit: true,
                                center: true,
                                minZoom: 0.2,
                                maxZoom: 20
                            });
                            // 自动放大到15倍
                            panZoomInstance.zoom(15);
                        }
                    })
                    .catch(error => {
                        console.error('Mermaid渲染失败:', error);
                        div.innerHTML = `<div class="mermaid-error">图表渲染失败: ${error.message}</div>`;
                    });
            }
        });
    }
    
    renderMarkdown(markdown) {
        // 简单的Markdown渲染（备用方法）
        let html = markdown
            // 标题
            .replace(/^### (.*$)/gm, '<h3>$1</h3>')
            .replace(/^## (.*$)/gm, '<h2>$1</h2>')
            .replace(/^# (.*$)/gm, '<h1>$1</h1>')
            // 粗体
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            // 代码块
            .replace(/```rust\n([\s\S]*?)\n```/g, '<pre class="code-block"><code>$1</code></pre>')
            .replace(/```([\s\S]*?)```/g, '<pre class="code-block"><code>$1</code></pre>')
            // 行内代码
            .replace(/`(.*?)`/g, '<code class="inline-code">$1</code>')
            // 列表
            .replace(/^\d+\. (.*$)/gm, '<li>$1</li>')
            .replace(/^- (.*$)/gm, '<li>$1</li>')
            // 链接
            .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>')
            // 换行
            .replace(/\n/g, '<br>');

        // 处理列表
        html = html.replace(/(<li>.*<\/li>)/gs, '<ul>$1</ul>');

        return html;
    }

    setLoading(loading) {
        this.isLoading = loading;
        const sendBtn = document.getElementById('sendBtn');
        const messageInput = document.getElementById('messageInput');

        if (loading) {
            sendBtn.disabled = true;
            sendBtn.innerHTML = '<div class="spinner"></div> 处理中...';
            messageInput.disabled = true;
        } else {
            sendBtn.disabled = false;
            sendBtn.innerHTML = '发送';
            messageInput.disabled = false;
        }
    }

    showStatus(message, type = 'info') {
        const statusContainer = document.querySelector('.status-indicator');
        if (statusContainer) {
            statusContainer.className = `status-indicator ${type}`;
            statusContainer.innerHTML = `
                <span>${type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️'}</span>
                <span>${message}</span>
            `;
            statusContainer.style.display = 'flex';

            // 3秒后自动隐藏
            setTimeout(() => {
                statusContainer.style.display = 'none';
            }, 3000);
        }
    }

    updateQuestionTypes() {
        const types = ['definition', 'usage', 'error_debug', 'comparison', 'faq'];
        const container = document.querySelector('.type-indicator');
        
        if (container) {
            container.innerHTML = types.map(type => 
                `<span class="type-tag" data-type="${type}">${this.getTypeLabel(type)}</span>`
            ).join('');
        }
    }

    updateQuestionTypeIndicator(activeType) {
        const tags = document.querySelectorAll('.type-tag');
        tags.forEach(tag => {
            tag.classList.remove('active');
            if (tag.dataset.type === activeType) {
                tag.classList.add('active');
            }
        });
    }

    getTypeLabel(type) {
        const labels = {
            definition: '定义',
            usage: '用法',
            error_debug: '调试',
            comparison: '对比',
            faq: 'FAQ'
        };
        return labels[type] || type;
    }

    adjustTextareaHeight(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
    }

    showWelcomeMessage() {
        const userName = this.currentUserId || '用户';
        const welcomeMessage = `
## 欢迎使用Rust知识解释智能体！ 🤖

您好，**${userName}**！我是您的专属Rust编程助手，可以帮助您：

### 🎯 支持的问题类型
- **定义类**: "生命周期是什么？"
- **用法类**: "如何使用迭代器？"
- **调试类**: "这个编译错误怎么解决？"
- **对比类**: "Rust和C++有什么区别？"
- **FAQ类**: "Rust适合什么项目？"

### 💡 使用建议
1. 提出具体的Rust相关问题
2. 我会根据问题类型提供个性化解答
3. 支持多轮对话和上下文理解
4. 享受智能化的编程学习体验

### 🚀 开始提问
请在下方输入您的Rust相关问题，我会为您提供详细的解答！
        `;
        
        this.addMessage(welcomeMessage, 'assistant');
    }

    clearChat() {
        const messagesContainer = document.querySelector('.messages');
        messagesContainer.innerHTML = '';
        this.showWelcomeMessage();
        this.showStatus('聊天记录已清空', 'success');
    }

    exportChat() {
        const messages = document.querySelectorAll('.message');
        let exportText = 'Rust知识解释智能体 - 聊天记录\n';
        exportText += '='.repeat(50) + '\n\n';

        messages.forEach(message => {
            const sender = message.classList.contains('user') ? '用户' : '智能体';
            const content = message.querySelector('.message-content').textContent;
            const time = message.querySelector('.message-time').textContent;
            
            exportText += `[${time}] ${sender}:\n${content}\n\n`;
        });

        const blob = new Blob([exportText], { type: 'text/plain;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `rust-chat-${new Date().toISOString().slice(0, 10)}.txt`;
        a.click();
        URL.revokeObjectURL(url);

        this.showStatus('聊天记录已导出', 'success');
    }
    
    async clearChat() {
        if (!this.currentUserId) return;
        
        if (confirm('确定要清空所有聊天记录吗？此操作不可恢复。')) {
            try {
                const response = await fetch(`/api/session/${this.currentUserId}`, {
                    method: 'DELETE'
                });
                
                if (response.ok) {
                    // 清空前端消息显示
                    const messagesContainer = document.querySelector('.messages');
                    if (messagesContainer) {
                        messagesContainer.innerHTML = '';
                    }
                    
                    this.showStatus('聊天记录已清空', 'success');
                } else {
                    this.showStatus('清空失败', 'error');
                }
            } catch (error) {
                console.error('清空聊天记录失败:', error);
                this.showStatus('清空失败', 'error');
            }
        }
    }

    loadUserSession() {
        // 从页面中获取用户ID
        const userIdInput = document.getElementById('userId');
        if (userIdInput && userIdInput.value) {
            this.currentUserId = userIdInput.value;
            this.sessionId = `session_${this.currentUserId}_${Date.now()}`;
        } else {
            // 如果没有用户ID，尝试从当前用户信息中获取
            const currentUserElement = document.querySelector('.current-user strong');
            if (currentUserElement) {
                this.currentUserId = currentUserElement.textContent;
                this.sessionId = `session_${this.currentUserId}_${Date.now()}`;
            }
        }
        
        // 加载历史对话
        this.loadChatHistory();
    }

    saveUserSession() {
        if (this.currentUserId) {
            localStorage.setItem('rustAgentUserId', this.currentUserId);
        }
    }
    
    async loadChatHistory() {
        if (!this.currentUserId) return;
        
        try {
            const response = await fetch(`/api/session/${this.currentUserId}`);
            if (response.ok) {
                const data = await response.json();
                if (data.status === 'success' && data.data.context.length > 0) {
                    // 清空当前消息
                    const messagesContainer = document.querySelector('.messages');
                    if (messagesContainer) {
                        messagesContainer.innerHTML = '';
                    }
                    
                    // 加载历史消息
                    data.data.context.forEach(turn => {
                        // 添加用户消息
                        this.addMessage(turn.question, 'user');
                        
                        // 添加助手消息
                        this.addMessage(turn.answer, 'assistant', turn.classification);
                    });
                    
                    // 滚动到底部
                    this.scrollToBottom();
                    
                    this.showStatus(`已加载 ${data.data.context.length} 条历史消息`, 'success');
                }
            }
        } catch (error) {
            console.error('加载历史消息失败:', error);
        }
    }
    
    showUserStatus() {
        if (this.currentUserId) {
            this.showStatus(`欢迎回来，${this.currentUserId}！系统已就绪`, 'success');
        }
    }
    
    async loadMultimodalEnhancements() {
        try {
            // 加载多模态样式
            const stylesResponse = await fetch('/api/multimodal/styles');
            if (stylesResponse.ok) {
                const stylesData = await stylesResponse.json();
                if (stylesData.status === 'success') {
                    document.getElementById('multimodal-styles').textContent = stylesData.css;
                }
            }
            
            // 加载多模态脚本
            const scriptsResponse = await fetch('/api/multimodal/scripts');
            if (scriptsResponse.ok) {
                const scriptsData = await scriptsResponse.json();
                if (scriptsData.status === 'success') {
                    document.getElementById('multimodal-scripts').textContent = scriptsData.javascript;
                }
            }
        } catch (error) {
            console.error('加载多模态增强功能失败:', error);
        }
    }
    
    async renderMultimodalContent(markdownContent) {
        try {
            const response = await fetch('/api/render', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    markdown: markdownContent
                })
            });
            
            if (response.ok) {
                const data = await response.json();
                if (data.status === 'success') {
                    // 处理Mermaid图表
                    this.processMermaidDiagrams(data.mermaid_diagrams);
                    
                    // 处理代码高亮
                    this.processCodeBlocks(data.code_blocks);
                    
                    return data.html;
                }
            }
        } catch (error) {
            console.error('多模态渲染失败:', error);
        }
        
        // 如果多模态渲染失败，回退到普通Markdown渲染
        return this.renderMarkdown(markdownContent);
    }
    
    processMermaidDiagrams(diagrams) {
        if (!diagrams || diagrams.length === 0) return;
        
        // 延迟处理Mermaid图表，确保DOM已更新
        setTimeout(() => {
            diagrams.forEach(diagram => {
                const container = document.getElementById(diagram.id);
                if (container) {
                    mermaid.render(diagram.id, diagram.code).then(({ svg }) => {
                        container.innerHTML = svg;
                        // Mermaid渲染后，svg已插入，添加缩放拖拽
                        const svgElem = container.querySelector('svg');
                        if (svgElem && window.svgPanZoom) {
                            const panZoomInstance = svgPanZoom(svgElem, {
                                zoomEnabled: true,
                                controlIconsEnabled: true,
                                fit: true,
                                center: true,
                                minZoom: 0.2,
                                maxZoom: 10
                            });
                            // 自动放大到5倍
                            panZoomInstance.zoom(5);
                        }
                    }).catch(error => {
                        console.error('Mermaid渲染失败:', error);
                        container.innerHTML = `<div class="mermaid-error">图表渲染失败: ${error.message}</div>`;
                    });
                }
            });
        }, 100);
    }
    
    processCodeBlocks(codeBlocks) {
        if (!codeBlocks || codeBlocks.length === 0) return;
        
        // 延迟处理代码高亮，确保DOM已更新
        setTimeout(() => {
            codeBlocks.forEach(block => {
                const container = document.getElementById(block.id);
                if (container) {
                    const codeElement = container.querySelector('code');
                    if (codeElement) {
                        hljs.highlightElement(codeElement);
                    }
                }
            });
        }, 100);
    }
}

// 登出功能
function logout() {
    if (confirm('确定要退出登录吗？')) {
        window.location.href = '/logout';
    }
}

// 复制代码功能
function copyCode(codeId) {
    const codeBlock = document.getElementById(codeId);
    if (!codeBlock) return;
    
    const code = codeBlock.querySelector('code');
    if (!code) return;
    
    const textToCopy = code.textContent;
    
    navigator.clipboard.writeText(textToCopy).then(() => {
        const btn = codeBlock.querySelector('.copy-btn');
        if (btn) {
            const originalText = btn.textContent;
            btn.textContent = '已复制!';
            btn.style.background = '#48bb78';
            
            setTimeout(() => {
                btn.textContent = originalText;
                btn.style.background = '#4a5568';
            }, 2000);
        }
    }).catch(err => {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制');
    });
}

// 页面加载完成后初始化应用
document.addEventListener('DOMContentLoaded', () => {
    window.app = new KnowledgeAgentApp();
});

// Markdown渲染+代码高亮+Mermaid渲染
function renderMarkdown(mdText) {
    return marked.parse(mdText, {
        highlight: function(code, lang) {
            if (lang && hljs.getLanguage(lang)) {
                return hljs.highlight(code, { language: lang }).value;
            }
            return code;
        }
    });
}

function renderMessage(mdText, container) {
    // 1. 渲染Markdown
    container.innerHTML = renderMarkdown(mdText);
    // 2. 代码高亮
    container.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
    });
    // 3. Mermaid 渲染
    container.querySelectorAll('code.language-mermaid').forEach((block) => {
        const parent = block.parentElement;
        const mermaidDiv = document.createElement('div');
        mermaidDiv.className = 'mermaid';
        mermaidDiv.innerHTML = block.textContent;
        parent.replaceWith(mermaidDiv);
    });
    if (window.mermaid) {
        mermaid.init(undefined, container.querySelectorAll('.mermaid'));
    }
}

// 移动端导航栏展开/收起
window.addEventListener('DOMContentLoaded', function() {
    const sidebarToggle = document.getElementById('sidebarToggle');
    const sidebar = document.querySelector('.sidebar');
    if (sidebarToggle && sidebar) {
        sidebarToggle.addEventListener('click', function() {
            sidebar.classList.toggle('active');
        });
        // 点击主内容区时自动收起侧边栏（移动端）
        document.querySelector('.chat-area')?.addEventListener('click', function() {
            if (window.innerWidth <= 900) {
                sidebar.classList.remove('active');
            }
        });
    }
}); 